<template>
	<view>
		<!-- 左边 -->
		<view class="sort-left">
			<text v-for="(item, i) in sort" :key="i" :class="i==num?'addto':''" @click="classify(i,item.sort_name,item._id)">
				{{ item.sort_name }}
			</text>
		</view>
		<!-- 右边 -->
		<view class="sort-right">
			<view class="Commodity" v-for="(item,i) in goods" :key="i">
				<view class="Com-image">
					<image :src="item.goods_cover" mode="aspectFill"></image>
				</view>
				<view class="Com-price">
					<text class="Com-title over-text">{{item.goods_title}}</text>
					<text class="stock-view">库存 {{item.stock}}</text>
					<view class="Com-bottom">
						<text clss="Real-price">￥{{item.goods_price}}</text>
						<view class="Button-rig">
							<text class="shelf-true" v-if="item.shelves" @click="soldOut(item._id,i)">已上架</text>
							<text class="shelf-false" v-else @click="putaway(item._id,i)">已下架</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载效果 -->
			<uni-load-more :status="load.status" :contentText="load.contentText" v-show="load.isShow"></uni-load-more>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
	<!-- 底部 -->
	<view class="manage">
		<text @click="toSort">管理分类</text>
		<text @click="toGoodsAdmini">添加商品</text>
	</view>
</template>

<script setup>
import { onMounted, reactive, toRefs, } from 'vue';
import { onShow, onReachBottom} from '@dcloudio/uni-app';
import { init } from '@/Acc-config/init.js';

// 加载效果配置
const load=reactive({
	status:'more',//加载效果样式,
	contentText:{
		contentdown: "上拉显示更多数据",
	},
	isShow:false
})
// 上拉加载
let page=reactive(0)//当前页码
onReachBottom(async ()=>{
	 
	load.isShow=true
	load.status='loading'
	load.contentText.contentrefresh='正在疯狂加载...'
	
	page++
	let sk = page * 6 //每次从数据库中查询的数据条数
	const DB=await init()
	const res=await DB.database().collection('goods').where({category:data.sort_name}).limit(6).skip(sk).field(goods_obj).get()

	data.goods=[...data.goods,...res.data]
	if(res.data.length==0){
		load.status='no-more'
		// page=0
		
	}
	return false
	
})

// 跳转到管理分类页面
function toSort() {
	uni.navigateTo({
		url: '/pages/sort-admin/index'
	});
}

// 跳转到上传商品页面
function toGoodsAdmini() {
	uni.navigateTo({
		url: '/pages/goods-admin/index'
	});
}

// 生命周期函数-页面每次显示都会调用
onShow(() => {
	load.isShow=false
	getData();
});

// 存储数据库返回的数据
let data = reactive({
	sort: [], //商品分类数据
	goods: [], //商品数据
	num: 0, //默认选中第一个分类
	sort_name: '', //当前选中的分类名称
	sort_id: '' //分类ID
});
let { sort,goods,num } = toRefs(data);


// 需要查询的商品数据字段 
let goods_obj = {
	goods_title: true,
	goods_cover: true,
	goods_price: true,
	stock: true,
	shelves: true
};

// 请求数据库
async function getData() {
	page=0
	uni.showLoading({
		title:'加载中',
		mask:true
	})
	let db = await init();
	let _ = db.database().command; //command数据库操作符
	// field()返回为true的字段  where()查询条件  gt(0)查询筛选操作符，表示需大于指定值
	// 查询出分类名称
	let result = await db.database().collection('goods_sort').where({ quantity: _.gt(0) }).field({ sort_name: true }).get();
	// 根据第一个分类名称查询出商品数据 （默认选中第一个分类，根据第一个分类去查询商品数据）
	let goods = await db.database().collection('goods').where({ category: result.data[0].sort_name }).limit(6).field(goods_obj).get()

	data.sort = result.data;
	data.goods=goods.data
	
	data.sort_name = result.data[0].sort_name
	data.sort_id=result.data[0]._id
	data.num=0
	
	// page=0
	
	uni.hideLoading()

}

// 左侧分类选中
async function classify(i,sort_name,id){
	page=0
	
	data.num=i
	data.sort_name=sort_name
	data.sort_id=id
	let db=await init()
	uni.showLoading({
		title:'加载中',
		mask:true
	})
	
	// 根据选中的分类名称查询商品
	let result=await db.database().collection('goods').where({category:sort_name}).limit(6).field(goods_obj).get()
	data.goods=result.data
	
	load.isShow=false
	
	uni.hideLoading()
}

// 下架
async function soldOut(id,i){
	let db=await init()
	try{
		// doc()获取集合中指定记录的引用,方法接受一个 id 参数，指定需引用的记录的 _id
		await db.database().collection('goods').doc(id).update({data:{shelves:false}}) 
		
		data.goods[i].shelves=false
		// 下架之后对该分类的数量自减
		let _=db.database().command
		await db.database().collection('goods_sort').doc(data.sort_id).update({data:{quantity: _.inc(-1)}})
		
		uni.$showMsg('下架成功','succes')
	}catch(e){
		//TODO handle the exception
		console.log(e)
		uni.$showMsg('下架失败')
	}
}
// 上架
async function putaway(id,i){
	let db=await init()
	try{
		// doc()获取集合中指定记录的引用,方法接受一个 id 参数，指定需引用的记录的 _id
		await db.database().collection('goods').doc(id).update({data:{shelves:true}}) 
		
		data.goods[i].shelves=true
		// 上架之后对该分类的数量自增
		let _=db.database().command
		await db.database().collection('goods_sort').doc(data.sort_id).update({data:{quantity: _.inc(1)}})
		uni.$showMsg('上架成功','succes')
	}catch(e){
		//TODO handle the exception
		console.log(e)
		uni.$showMsg('上架失败')
	}
}

</script>

<style scoped> 
.sort-view {
	display: flex;
}
.sort-left {
	width: 200rpx;
	text-align: center;
	background-color: #f6f6f6;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
}

.sort-left text {
	display: block;
	color: #5f5f5f;
	padding: 20rpx 0;
	border-bottom: 1px solid #ffffff;
	font-size: 28rpx;
}
.addto {
	background-color: #ffffff;
	font-weight: bold;
}
/* 右边 */
.sort-right {
	margin: 20rpx 20rpx 0 220rpx;
	flex: 1;
}
.Com-image image {
	display: block;
	width: 150rpx;
	height: 150rpx;
	border-radius: 10rpx;
}
.Com-bottom {
	display: flex;
	justify-content: space-between !important;
}
.Commodity text {
	display: block;
}
.Commodity {
	display: flex;
	margin-bottom: 50rpx;
}
.Com-price {
	flex: 1;
	padding-left: 20rpx;
}
.Com-price view {
	display: flex;
	justify-content: flex-end;
}
.Com-price view text:nth-child(2) {
	margin-left: 50rpx;
}
.Com-title {
	font-weight: bold;
}
.stock-view {
	padding: 10rpx 0;
	color: #c1c1c1;
	font-size: 26rpx;
}
.Real-price {
	color: #b1865b;
	font-weight: bold;
}
.Button-rig text {
	border-radius: 7rpx;
	padding: 7rpx 20rpx;
	font-size: 26rpx;
}
.shelf-true {
	color: #ffffff;
	background-color: #e64340;
}
.shelf-false {
	background-color: #f8f8f8;
	color: rgba(0, 0, 0, 0.2);
}
/* 底部 */
.manage {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 200rpx;
	display: flex;
	justify-content: space-between;
}
.manage text {
	width: 50%;
	text-align: center;
	padding: 20rpx 0;
}
.manage text:nth-child(1) {
	background-color: antiquewhite;
}
.manage text:nth-child(2) {
	background-color: aliceblue;
}
</style>
